<template>
	<view class="comAll">
		<view class="mainTitle">
			<!-- <view class="status">
				<text :class="{'status0':currTag === 1}">{{status[currTag]}}</text>
			</view> -->
			<view class="statusIcon">
				<image :src="statusIcon" mode="widthFix"></image>
			</view>
			<view class="title">
				<text>{{info.title}}</text>
			</view>
		</view>
		<view class="content infoA">
			<view class="baseInfo">
				<text>基本信息</text>
			</view>
			<view>
				<text class="contentLeft">订单编号: {{info.orderNo ? info.orderNo : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">制表日期: {{info.create_time ? formatTime(info.create_time, 'Y-M-D') : '--'}}</text>
				<text class="contentRight">货款账期: {{info.payment_time ? info.payment_time : '--'}}</text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">交货日期: {{info.delivery_time ? formatTime(info.delivery_time, 'Y-M-D') : '--'}}</text>
				<text class="contentRight">发货时效: {{info.trading_hours ? info.trading_hours : '--'}}</text>
			</view>
		</view>
		<view class="content infoB">
			<view class="otherInfo">
				<text class="contentLeft">供应商名称: {{info.supplier_name ? info.supplier_name : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">供应商联系人: {{info.supplier_contacts ? info.supplier_contacts : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">供应商电话: {{info.supplier_phone ? info.supplier_phone : '--'}}</text>
				<text class="contentRight"></text>
			</view>
		</view>
		<view class="content infoC">
			<view class="otherInfo">
				<text class="contentLeft">收货部联系人: {{info.receiving_contacts ? info.receiving_contacts : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">收货部电话: {{info.receiving_phone ? info.receiving_phone : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">收货部地址: {{info.receiving_address ? info.receiving_address : '--'}}</text>
				<text class="contentRight"></text>
			</view>
			<view class="otherInfo">
				<text class="contentLeft">收货部邮箱: {{info.receiving_email ? info.receiving_email : '--'}}</text>
				<text class="contentRight"></text>
			</view>
		</view>
		<view v-if="currTag === 4" class="receiptTip">
			<!-- <text>--{{info.receivingTip}}</text> -->
			<text>收货部已收货，货物状态正常</text>
		</view>
		<view>
			<view class="scrollTitle">
				<text>
					选品清单
				</text>
				<text>
					滑动查看详情
				</text>
			</view>
			<!-- <view class="tableTip">
				
			</view> -->
			<scroll-view scroll-x="true" class="scrollPage" id="scrollView">
				
				<view class="myTable">
					<view v-for="(listKey, key , index) in listTitle" :key="key" class="myTableBody">
						<view class="myTableTh">
							{{listKey.title}}
						</view>
						<view class="myTableTd" v-for="(item, index) in info.item" :key="index">
							{{listKey.code === 'index' ? index + 1 : item[listKey.code] !== ''? item[listKey.code]: '--'}}
							<template v-if="item[listKey.code] !== ''">
								{{listKey.code === 'price' || listKey.code === 'total_price' ? '元' : ''}}
							</template>
						</view>
					</view>
				</view>
				<view class="myTabelAll">
					<text class="myTabelAllTitle">总计</text>
					<text class="myTabelAllAmount">金额: {{info.total_price ? info.total_price : '--'}}元</text>
					<!-- <text class="myTabelAllAmount">数量: {{info.sum}}袋</text> -->
				</view>
			</scroll-view>
		</view>
		<view class="bottomTip">
			<view class="bottomTipContent">
				<view class="bottomTipLeft">
					<text>备注：</text>
				</view>
				<view class="bottomTipRight">
					<uParse :content="info.remark ? info.remark : '--'" />
				</view>
			</view>
			<view class="bottomTipSeal">
				<view class="bottomTipSealView">
					<view class="seal" @click="previewImage([info.seal])">
						<image :src="info.seal" mode="widthFix"></image>
					</view>
					<view class="sealDate">
						<text>{{info.create_time ? formatTime(info.create_time, 'Y-M-D') : '--'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatTime,
		previewImage
	} from '@/utils/tools.js'
	import {
		uParse
	} from '@/components/gaoyia-parse/parse.vue'
	export default {
		props: {
			info: Object,
			currTag: Number
		},
		data() {
			return {
				statusIcon: require('../../static/order/to-be-confirmed.png'),
				status: {
					1: '待确认',
					2: '已确认',
					3: '代发货',
					4: '已发货',
				},
				listTitle: [{  //条目：序号 采购数量 采购单价 采购金额 商品名称 商品编码 商品规格 采购单位 商品外包装  商品内包装  储存方式 保质期 配送方式
						title: '序号',
						code: 'index'
					},
					{
						title: '采购数量',
						code: 'sum'
					},
					{
						title: '采购单价',
						code: 'price'
					},
					{
						title: '采购金额 ',
						code: 'total_price'
					},
					{
						title: '商品名称',
						code: 'name'
					},
					{
						title: '商品编码',
						code: 'submissionNo',
					},
					{
						title: '商品规格',
						code: 'specification'
					},
					{
						title: '采购单位',
						code: 'units'
					},
					{
						title: '商品外包装',
						code: 'external_packing'
					},
					{
						title: '商品内包装 ',
						code: 'inside_packing'
					},
					{
						title: '储存方式',
						code: 'environment'
					},
					{
						title: '保质期',
						code: 'shelf_life'
					},
					{
						title: '配送方式',
						code: 'distribution_type'
					},
				]
			}
		},
		components: {
			uParse,
		},
		methods: {
			formatTime,
			previewImage,
			// 判断图标文字类型
			chooseIcon(value) {
				if (this.currTag === 1) {
					if (value.status === 'refuse') {
						this.statusIcon = require('../../static/order/refuse.png')
					} else {
						this.statusIcon = require('../../static/order/to-be-confirmed.png')
					}

				}
				if (this.currTag === 2) {
					if (value.status === 'canceled') {
						this.statusIcon = require('../../static/order/cancel.png')
					} else {
						this.statusIcon = require('../../static/order/isOK.png')
					}

				}
				if (this.currTag === 3) {
					this.statusIcon = require('../../static/order/ship.png')
				}
				if (this.currTag === 4) {
					this.statusIcon = require('../../static/order/received.png')
				}
			},
		},
		watch: {
			info(newValue, oldValue) {
				this.chooseIcon(newValue)
			}
		},
		onReady() {

		}
	}
</script>

<style scoped>
	.comAll {
		padding: 13.33upx 0 40upx 0;
		background-color: #FFF;
		border-radius: 10upx;
		box-shadow: 0 0 30upx -15upx #f03d3d;
	}

	.mainTitle {
		text-align: center;
		padding-bottom: 33.33upx;
		height: 50upx;
		line-height: 50upx;
		position: relative;
	}

	.status {
		position: absolute;
		color: #FFF;
		font-size: 20upx;
		display: inline-block;
		left: 0;
	}

	.status text {
		background-color: #f7533e;
		border-radius: 8upx;
		padding: 3upx 10upx;
		margin: auto 0;
	}

	.status0 {
		background-color: #ffc8c7 !important;
	}

	.statusIcon {
		position: absolute;
		right: 0;
		top: 35upx;
		transform: rotate(25deg);
	}

	.statusIcon image {
		width: 214.66upx;
	}

	.title {
		text-align: center;
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		display: flex;
	}

	.title text {
		margin: 0 auto;
	}

	.content {
		border-radius: 10upx;
		background-color: #f2f2f2;
		padding-left: 10upx;
		padding-right: 10upx;
		padding-top: 10upx;
		padding-bottom: 15upx;
		margin: 0 20upx 0 20upx;
	}
	.infoA{
		font-size: 28upx;
	}
	.infoA .contentRight {
		margin-left: 80upx;
	}
	.infoB{
		font-size: 32upx;
		margin-top: 7upx;
	}
	.infoC{
		font-size: 32upx;
		margin-top: 7upx;
	}
	.baseInfo {
		color: #333333;
		font-size: 24upx;
		font-weight: bold;
		margin-bottom: 15upx;
	}

	.otherInfo {
		/* height: 43upx; */
	}

	.content text {
		color: #333333;
		display: inline-block;
		line-height: 50upx;
	}

	.contentLeft {}

	.contentRight {}

	.receiptTip {
		border-radius: 10upx;
		background-color: #f2f2f2;
		padding: 10upx;
		font-size: 24upx;
		color: #f7533e;
		height: 136upx;
		margin: 7upx 20upx 0 20upx;

	}

	.scrollPage {
		border-bottom: 1px solid #ffc8c7;
		margin-top: 10upx;
	}

	.scrollTitle {
		box-sizing: border-box;
		margin-top: 40upx;
		padding: 0 10upx;
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		/* padding-left: 13.33upx; */
	}
	.scrollTitle text:nth-of-type(2){
		font-size: 24upx;
		color: #e87575;
	}
	/* .tableTip{
		position: absolute;
		right:13upx;
		font-size: 24upx;
		color: #e87575;
	} */
	
	.myTable {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
	}

	.myTableBody {
		font-size: 24upx;
		color: #6d6d6d;
	}

	.myTableTh {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}

	.myTableTd {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		border-top: 1px solid #ffc8c7;
		padding: 3upx 20upx;
	}

	.myTableTd:last-child {
		border-bottom: 1px solid #ffc8c7;
	}

	.myTabelAll {
		
		display: flex;
		width: 100%;
		padding: 3upx 0;
	}

	.myTabelAllTitle {
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		padding-left: 20upx;
	}

	.myTabelAllAmount {
		font-size: 24upx;
		color: #f7533e;
		padding-left: 50upx;
	}

	.bottomTip {
		margin: 40upx 20upx 0 20upx;
		border-radius: 10upx;
		background-color: #f2f2f2;
		padding: 10upx;
	}

	.bottomTipContent {
		display: flex;
	}

	.bottomTipLeft {
		font-size: 24upx;
		color: #6d6d6d;
		width: 13%;
	}

	.bottomTipRight {
		width: 90%;
	}

	.bottomTipRight text {
		display: block;
	}

	.bottomTipSeal {
		display: flex;
		justify-content: flex-end;
	}

	.bottomTipSealView {}

	.seal {
		/* background-color: #626262; */
		width: 186.66upx;
		/* height:128upx; */
		/* border-radius: 50%; */
	}

	.seal image {
		width: 186.66upx;
		/* height:128upx; */
		/* border-radius: 50%; */
		/* overflow: hidden; */
	}

	.sealDate {
		font-size: 20upx;
		color: #6d6d6d;
		text-align: center;
		padding-top: 17upx;
	}
</style>
